<template>
  <div>
        <h3>Vue lifecycle</h3>
        <hr>
        <!--Register a reference to an element or a child component.-->
        <!--给一个元素或者一个子组件注册一个关联对象-->
        <div class="box" ref="node">
            <span>{{text}}</span>
        </div>
        <div class="btn">
          <button @click="hunt">抓猪</button>
          <button @click="change">改变</button>
        </div>
        <ChildNode v-if="show"/>
        <p><button @click="toggleShow">显示或关闭子组件</button></p>
  </div>
</template>
<script>
    import ChildNode from './child'

    export default{
        components:{
            ChildNode
        },
        data(){
            return{
                text:'🐖.......🦅...',
                value: 77,
                show:true
            }
        },
        methods:{
            hunt(){
                this.text = '🐖🦅.........'
            },
            change(){
                this.value = Date.now()
            },
            toggleShow(){
                this.show = !this.show
            }
        },
        beforeCreate(){//这个生命周期，已经被抛弃，几乎不用
            console.log('组件即将被创建.start');
            console.log(this.text);
            //vue 不能直接获取节点，要获取一个VNode  使用关联对象获取
            // console.log(document.getElementById('node'));
            console.log(this.$refs.node);
            console.log('组件即将被创建.end');
        },
        created(){//实例对象已经被创建，处理初始化数据，不能处理dom节点信息
            console.log('组件已经被创建.start');
            console.log(this.text);
            console.log(this.$refs.node);
            console.log('组件已经被创建.end');
        },
        beforeMount(){
            console.log('组件即将被挂载.start');
            console.log(this.text);
            console.log(this.$refs.node);
            console.log('组件即将被挂载.end');
        },
        mounted(){//虚拟dom节点已经被挂载到dom树上，可以操作dom元素；常用的业务:echars的实例化
            console.log('组件已经被挂载.start');
            console.log(this.text);
            console.log(this.$refs.node);
            console.log('组件已经被挂载.end');
        },
        beforeUpdate(){
            console.log('组件即将被更新.start');
            console.log(this.text);
            console.log(this.$refs.node.innerText);//页面上的内容是以前的 innerText（页面上的内容不是{{text}}里的）
            console.log('组件即将被更新.end');
        },
        updated(){
            console.log('组件已经被更新.start');
            console.log(this.text);
            console.log(this.$refs.node.innerText);
            console.log('组件已经被更新.end');
        }
        //只有当一个数据绑定到虚拟dom上，并且这个数据发生变化时这个生命周期才触发
    }  
</script>
<style scoped>
    h3{
        text-align: center;
    }
    .box{
        margin: 30px auto;
        width: 200px;
        height: 200px;
        background-color: cadetblue;
        border: 5px solid sandybrown;
        text-align: center;
        line-height: 200px;
        box-shadow: 3px 3px rgb(188, 205, 221);
    }
    .btn button{
        display: block;
        width: 70px;
        height: 30px;
        margin: 30px auto;
    }
</style>